<template>
  <div class="p-3">
    <el-button @click="setValidToken">有效token</el-button>
    <el-button @click="setOverdueToken">过期token</el-button>
    <el-button @click="setRefreshToken">刷新token</el-button>
    <el-button @click="removeToken">删除 cookie</el-button>
    <el-button @click="removeRefreshToken">删除 Refresh Token (localStorage)</el-button>
    <el-button @click="getData">axios请求</el-button>
  </div>
</template>

<script>
import { STORAGE_TOKEN_REFRESH } from '@/common/plugins/constant'
const writeCookie = (name, value, expiresIn) => {
  const expire = new Date(new Date().getTime() + +expiresIn)
  const expireString = '; expires=' + expire.toUTCString()
  document.cookie = name + '=' + escape(value) + expireString + '; path=/'
}

// const getCookie = (name) => {
//   const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
//   const arr = document.cookie.match(reg)
//   return arr ? unescape(arr[2]) : null
// }

const removeCookie = name => {
  writeCookie(name, '1', -1)
}
export default {
  data() {
    return {
      overdueToken:
        'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZGRyZXNzQ29kZSI6IjUyMDYwMjAwMDAwMCIsImNsaWVudE9yZ0NsYXNzIjoib3JnX3ZpbWlfb3BlciIsInVzZXJfbmFtZSI6InZpbWktc3VwcGVyIiwiY2xpZW50X2lkIjoiZWUwZjkxMzYtMGJlYy00MTk1LWI5YTUtMWZjODE5NWFmMDFlIiwib3JnQ29kZSI6IkdaREIiLCJ1c2VyUmVnaW9uTGV2ZXIiOiIyIiwiam9iIjoib3JnX2NvcnAiLCJvcGVuaWQiOiIzYTkxNGY5OC0xM2NmLTRhYzgtYTE0ZC1lOTFmZTg2NjA5NjAiLCJ1c2VySWQiOiJjZmU4YjAwYi00NWQzLTQ4YjQtYjEwZC00Mzk0NTcwMTcyM2EiLCJhdWQiOlsiYXV0aC1zZXJ2ZXIiLCJlYmItcGxhdGZvcm0iLCJpbmR1c3RyaWFsLXBsYXRmb3JtIiwiaW5mby1zZXJ2ZXIiLCJkYXRhLWRpcmVjdG9yeSIsIm1lcmNoYW50LXBsYXRmb3JtIl0sInNjb3BlIjpbInVzZXItbWUiLCJ1c2VyIl0sImlhdCI6MTU5MTc2ODk1OSwiZXhwIjoxNTkxOTQxNzU5fQ.SVqRMMRpB2grco-IuEJuDW5vDWfD9VxAsUDigeulAzfnAO0pPChA1uiOUycP2xjWmPxpbbZoy9etuvhv_NN_8j4v6IeLW-deeMNADi6CDd0PLXl1GfXLIW13bU-48Dlbzx2qy27HsK2BW8827xxcjFte39a2dcRk4HTp5RPx71WPXp2QmTv_CgQvCL8ngjmfjHghy8pzeoRxzrEUaimIkaEGrm7lhj9oMts_V13Cs-W6ig65VXWmd4Z_qBRYHKfsobN_CsdrJDUssEhvUd7yhQMXSMUTvh7s1IvuQWtBalTNBQjKuybM023fSFqP8c_BJJ3xd5JxVoB2lXfmN7QcFA',
      validToken:
        'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZGRyZXNzQ29kZSI6IjUyMDYyMTAwMDAwMCIsImNsaWVudE9yZ0NsYXNzIjoib3JnX2NyZWRpdCIsInVzZXJfbmFtZSI6ImRiLWprIiwib3BlbmlkIjoiMTRlNTY2YjgtYmNhOC00ZDFjLThjMDYtMjRhZmYwMGMxN2JhIiwidXNlcklkIjoiYzdhYzYwM2YtZDcyYi00ZGIzLWE2NTctYzVlMWQ1NzE4MGE2IiwiY2xpZW50X2lkIjoiMGE3OTZlMmItZDZhNC00NWQ0LWJhOTItZDc2OTk5ZGNiMDM0IiwiYXVkIjpbImluZHVzdHJpYWwtcGxhdGZvcm0iLCJhdXRoLXNlcnZlciIsIm1lcmNoYW50LXBsYXRmb3JtIiwiZWJiLXBsYXRmb3JtIiwiaW5mby1zZXJ2ZXIiLCJjZmNhIl0sIm9yZ0NvZGUiOiJHMTA1MjA2MjEwMDAwOTM5MEoiLCJzY29wZSI6WyJ1c2VyLW1lIiwidXNlciIsImFkbWluIiwic2VuaW9yLWFkbWluIl0sInVzZXJSZWdpb25MZXZlciI6IjMiLCJleHAiOjE1OTk4NzY0MzMsImpvYiI6Im9yZ19jb3JwIiwianRpIjoiODU3MDE1YTAtNjFiNi00NDRlLWI5MDctOGYyMmM1ODZmNzQ3In0.CNcA3bRMiJuSFsIDlAMjDrf2YZ7u8RwJNTtWBRd5Ou99u3ba4Oy7W1_U1ZQe0AJ2hk4Y0MNrWPA4aeLCC5VZ6_kjibCcCY9BX7aytv_XKg-QpeZ_plcskeG8ewIF01m1StFRlgDTtLw94tGZsMOvaxFU1T6tX1hWI0n7QgR2n-hgE9kLnLuqCfXjhjUFciny1b_e3NQX6vzKWl2Un-WW0-FREkHCKc2E0Sd0FAtMRX6mjaZY2G1BBF6XpXQpV7SekyY8TDG9eYLfh3Jwac67IcCdOsh_FmUZPkgKoBnjFw4jLHhoijDzG5xd-BgX80nQKjLhtCbsRH5MsgZQGKLLVw',
      refreshToken:
        'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZGRyZXNzQ29kZSI6IjUyMDYyMTAwMDAwMCIsImNsaWVudE9yZ0NsYXNzIjoib3JnX2NyZWRpdCIsInVzZXJfbmFtZSI6ImRiLWprIiwib3BlbmlkIjoiMTRlNTY2YjgtYmNhOC00ZDFjLThjMDYtMjRhZmYwMGMxN2JhIiwidXNlcklkIjoiYzdhYzYwM2YtZDcyYi00ZGIzLWE2NTctYzVlMWQ1NzE4MGE2IiwiY2xpZW50X2lkIjoiMGE3OTZlMmItZDZhNC00NWQ0LWJhOTItZDc2OTk5ZGNiMDM0IiwiYXVkIjpbImluZHVzdHJpYWwtcGxhdGZvcm0iLCJhdXRoLXNlcnZlciIsIm1lcmNoYW50LXBsYXRmb3JtIiwiZWJiLXBsYXRmb3JtIiwiaW5mby1zZXJ2ZXIiLCJjZmNhIl0sIm9yZ0NvZGUiOiJHMTA1MjA2MjEwMDAwOTM5MEoiLCJzY29wZSI6WyJ1c2VyLW1lIiwidXNlciIsImFkbWluIiwic2VuaW9yLWFkbWluIl0sInVzZXJSZWdpb25MZXZlciI6IjMiLCJhdGkiOiI3ZWRiYTFmMC04NzQyLTRhN2YtYWRlYS04YWNkMTcyN2ViNTUiLCJleHAiOjE2MDI0Njg3MjMsImpvYiI6Im9yZ19jb3JwIiwianRpIjoiYTc5ZjUxZDQtZjMxMy00NDFiLTkxODUtOTIxMmE2NzVjODU2In0.MR0Y-P2o9dywlrHYc-PT6v-qqZb3vN-7RF5uHYaxyalI0FGSBnkfLAJdUzN9AGoYFNCo9MoHk40SylAjYeHsv71kz3zAgoHQVIyEfWaRXS-1cKtjwNBJyWMfVZdgdUT5vt5sBa5pdyHbvYpuXCJk7_JoMv4t4CDIznf9oqN99WspgptS_lhuGZpbzpqV-QUTDfpKU2S-Rk-wSckqBEhKh6l8hIC7lYO1uRsbl4CvWujKOEF3hqKE8IGEgAusw0H82Fj9WKBmXIaiK0ClHWtlPJ1n-L7ksRZ0dLOqlgR4bM9f74_n1pSZ5aCpiFtAAi5j21MaXw5WT32TkbsrQJXDEw',
      overdueRefreshToken:
        'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZGRyZXNzQ29kZSI6bnVsbCwiY2xpZW50T3JnQ2xhc3MiOiJ2aW1pOCIsInVzZXJfbmFtZSI6InZpbWk4Iiwib3BlbmlkIjoidmltaTgtMDAxIiwidXNlcklkIjoidmltaTgtMDAxIiwiY2xpZW50X2lkIjoidmltaThfY29tIiwiYXVkIjpbImluZHVzdHJpYWwtcGxhdGZvcm0iLCJhdXRoLXNlcnZlciIsImRhdGEtZGlyZWN0b3J5IiwibWVyY2hhbnQtcGxhdGZvcm0iLCJlYmItcGxhdGZvcm0iLCJpbmZvLXNlcnZlciJdLCJvcmdDb2RlIjpudWxsLCJzY29wZSI6WyJ1c2VyLW1lIiwidXNlciIsInNoYXJlaG9sZGVyIiwiYWRtaW4iLCJzZW5pb3ItYWRtaW4iLCJzdXBlci1hZG1pbiJdLCJ1c2VyUmVnaW9uTGV2ZXIiOiIyIiwiYXRpIjoiNWIxMzFmODQtMzhkZS00ZGZhLWEwZWUtMjViYWIxNWUzZDBmIiwiZXhwIjoxODU2MzkxOTMzLCJqb2IiOiJ2aW1pX21hbmFnZXIiLCJqdGkiOiIxNTRkOWIyNy0wZWEyLTQ0NDYtOTkxYi0zNzI2ZjEzOWU2NTgifQ.ZSlNUZPfeUprO_aNhA7q0psya4yvs2OahNUfOW9cJX8ix2jrooIZcE_3NH2kj6TeLI_lfPGNCmV7LpmET6-Zq18OORY1TV28JdiGTBv5KJnJebI9YFs3e-i3ZwDdy8gTDf9WQD60pa5z1wXaNMBgyikMuh3vmXnrCmMrs4fWLQRAMGk23_-9Bw2VgVMw1TxaXlCTTZvdbIKATerK3LNRl2er8Qx7GBs-3Zt4V1Tx1IlD71psGx7FrWoaz60yCpjkwh_HOWnluxFc9lmDPQSycMKZ0iejwZY6W52xmHCzpgbco-09Mocs4WugycViZpB9lKAb0HpLrS4N3VW3fTieMg',
    }
  },

  methods: {
    removeToken() {
      removeCookie('Authorization')
      removeCookie('gateway-session')
    },
    removeRefreshToken() {
      localStorage.removeItem(STORAGE_TOKEN_REFRESH)
    },
    setValidToken() {
      writeCookie('Authorization', `bearer ${this.validToken}`, 30 * 24 * 60 * 60 * 1000)
    },

    setRefreshToken() {
      localStorage.setItem(STORAGE_TOKEN_REFRESH, this.refreshToken)
    },

    setOverdueToken() {
      writeCookie('Authorization', `bearer ${this.overdueToken}`, 30 * 24 * 60 * 60 * 1000)
      removeCookie('gateway-session')
    },

    setOverdueRefreshToken() {
      localStorage.setItem(STORAGE_TOKEN_REFRESH, this.overdueRefreshToken)
    },

    getData() {
      this.$api.getData(this.$serviceName, 'customer_related', { index: 1, size: 10 })
      this.$api.getData(this.$serviceName, 'customer_related', { index: 1, size: 10 })
      this.$api.getData(this.$serviceName, 'customer_related', { index: 1, size: 10 })
    },
  },
}
</script>
<style lang="scss" scoped></style>
